import React, { Component } from "react";
import Tab from "./../components/common/TabVertical";
import Content from "../components/common/Content";
import Page from "./../components/common/Page";
import Empty from "./../components/common/Empty";
import styles from "./ThemeAdType.module.scss";
import api from "./../serve/api";
import { withRouter } from "react-router-dom";
import ThemeAd from "./ThemeAd";

class HotNews extends Component {
  constructor(props) {
    super(props);
    this.state = {
      types: [],
      news: [],
      typeId: "",
      pageTotal: "",
      page: 1,
      pageSize: 16,
      selected: 0
    };
  }

  onTab(item, index) {
    console.log("3333");
    this.setState({
      selected: index,
      typeId: item.id
    });
    this.getThemeAds(item.id, 1);
  }

  getCurrentPage(currentPage) {
    // this.getHotNews(this.state.typeId, currentPage);
  }

  componentDidMount() {
    this.getThemeAdTypes();
  }

  async getThemeAdTypes() {
    let { match } = this.props;
    let id = match.params.id;
    const data = await api.getAdTypeByParentId({ id: id });
    if (data && data.code === "000000") {
      this.setState({
        types: data.result || []
      });
      if (data.result.length > 0) {
        const first = data.result[0];
        this.getThemeAds(first.id, 1);
      }
    }
  }

  async getThemeAds(id, index) {
    let pageSize = this.state.pageSize;
    const themeAd = await api.getThemeAdsByType({
      id: id,
      page: index,
      pageSize: pageSize
    });
    if (themeAd && themeAd.code === "000000") {
      this.setState({
        page: index,
        pageTotal: themeAd.resultNum,
        news: themeAd.result || []
      });
    }
  }

  onItem(item) {
    this.props.history.push(`/mainPage/AdDetail/themeAd/${item.id}`);
  }

  render() {
    const { types, news, page, pageTotal, selected } = this.state;
    return (
      <div className={styles.theme_container}>
        <Tab
          tabs={types}
          selected={selected}
          onTab={(item, index) => this.onTab(item, index)}
        />
        <div className={styles.theme_content}>
          {news.length === 0 && <Empty title="暂无数据" />}
          {news.length > 0 && (
            <Content datas={news} onItem={item => this.onItem(item)} />
          )}
          {news.length > 0 && (
            <Page
              pageConfig={{
                totalPage: pageTotal,
                pageSize: this.state.pageSize,
                currentPage: page
              }}
              pageCallbackFn={currentPage => this.getCurrentPage(currentPage)}
            />
          )}
        </div>
      </div>
    );
  }
}
export default withRouter(HotNews);
